import { PropsWithChildren, useEffect, useMemo, useState } from "react";
import { SvgIcon } from "../../components/SvgIcon";
import { Tabs } from "antd";
import { TabsProps } from "antd/lib";
import { CaseResultList } from "./CaseResultList";
import { LawResultList } from "./LawResultList";
import { SSEChatItem } from "../LegalAdvice/SSEChatItem";
import { useLegalSearchStore } from "@/store";

interface ILegalSearchInfoProps {
  className?: string;
  infoKey?: string;
}
export function LegalSearchInfo(
  props: PropsWithChildren<ILegalSearchInfoProps>
) {
  const tabType = useLegalSearchStore((state) => state.tabType);
  const setTabType = useLegalSearchStore((state) => state.setTabType);
  const setFormValues = useLegalSearchStore((state) => state.setFormValues);
  const activeKey = useLegalSearchStore((state) => state.activeKey);
  const formValues = useLegalSearchStore((state) => state.formValues);
  const setActiveKey = useLegalSearchStore((state) => state.setActiveKey);
  const updateLoadingChat = useLegalSearchStore(
    (state) => state.updateLoadingChat
  );
  const chatList = useLegalSearchStore((state) => state.chatList);
  const [reStart] = useState(false);

  const queryMessage = useMemo(() => {
    console.log("chatList", chatList);
    return chatList?.[0]?.text;
  }, [chatList]);

  const answerMarkdown = useMemo(() => {
    console.log("chatList", chatList);
    return chatList?.[1]?.text;
  }, [chatList]);

  const typeItems: TabsProps["items"] = [
    {
      key: "1",
      label: "案例",
      children: (
        <CaseResultList activeKey={queryMessage} formValues={formValues} />
      ),
    },
    {
      key: "2",
      label: "法规",
      children: (
        <LawResultList activeKey={queryMessage} formValues={formValues} />
      ),
    },
  ];

  useEffect(() => {}, [activeKey]);

  return (
    <div className="flex flex-row h-full">
      <div className="flex-1 min-w-0 flex flex-col h-full">
        <div
          className="bg-white h-[52px] flex flex-row items-center px-[24px] relative z-10"
          style={{
            boxShadow: "0 6px 12px #00000014",
            borderBottom: "1px solid #e0e2eb",
          }}
        >
          <div
            onClick={() => {
              setActiveKey("");
              setFormValues({});
              setTabType("1");
            }}
            className="w-[36px] h-[36px] rounded-[50%] bg-[#fafafc] border border-solid border-[#e8eaf2] flex flex-row items-center justify-center cursor-pointer"
          >
            <SvgIcon name="icon-xinjianduihua" />
          </div>
          <div className="flex-1 min-w-0 px-[60px]">
            <div className="text-[#3d3d3d] text-[20px] font-[500]">
              {queryMessage}
            </div>
          </div>
          <div className="w-[36px] h-[36px] rounded-[50%] bg-[#fafafc] border border-solid border-[#e8eaf2] flex flex-row items-center justify-center cursor-pointer">
            <SvgIcon name="icon-lujing" />
          </div>
        </div>
        <div className="searchTabs flex-1 min-h-0 overflow-auto px-[120px] pt-[12px] bg-white">
          <Tabs activeKey={tabType} items={typeItems} onChange={setTabType} />
        </div>
      </div>
      <div
        className="w-[500px] h-full overflow-auto"
        style={{ padding: "0 24px 16px" }}
      >
        <div className="flex flex-row items-center pt-[16px] pb-[14px] gap-[8px]">
          <SvgIcon
            name="extend-singleStar-fill"
            size={20}
            color="rgb(24, 95, 238)"
          />
          <div>智能洞察</div>
        </div>

        {reStart && (
          <div className="bg-white shadow-sm rounded-[8px] p-[16px] mt-[16px]">
            <div className="flex flex-row items-start">
              <div className="py-[4px] pr-[16px]">
                <SvgIcon name="tongyi-info-fill" color="rgb(44, 121, 241)" />
              </div>
              <div className="flex-1 min-w-0 flex flex-col">
                <span>
                  检测到您已切换至法规检索，是否需要重新生成智能分析结果
                </span>
                <div
                  className="cursor-pointer"
                  style={{ color: "rgb(44, 121, 241)" }}
                >
                  重新生成
                </div>
              </div>
            </div>
          </div>
        )}

        <div className="bg-white shadow-sm rounded-[8px] mt-[16px]">
          {!answerMarkdown && (
            <SSEChatItem
              chatId={activeKey}
              message={queryMessage}
              updateLoadingChat={updateLoadingChat}
              simple
            />
          )}
          {answerMarkdown && (
            <div className="text-[16px] ml-[16px] text-justify break-all rounded-[16px] text-[#333] font-[400] markdownAnswer markdown-body overflow-hidden">
              <div
                className="w-full flex-1 min-w-0"
                dangerouslySetInnerHTML={{ __html: answerMarkdown }}
              ></div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
